<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-01-12 19:46:02
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="avatar-uploader-box">
    <el-upload
      class="avatar-uploader el-upload--text"
      :action="uploadUrl"
      :show-file-list="false"
      accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb"
      :auto-upload="false"
      :on-change="beforeAvatarUpload"
    >
      <video
        v-if="videoPath != '' && !videoFlag"
        :src="videoPath"
        class="avatar video-avatar"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i
        v-else-if="videoPath == '' && !videoFlag"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top: 30px"
      />
      <el-button
        v-if="isShowUploadVideo"
        slot="trigger"
        class="video-btn"
        size="small"
        type="primary"
      >
        选取文件
      </el-button>
    </el-upload>
    <P
      v-if="isShowUploadVideo"
      class="text"
    >
      请保证视频格式正确，且不超过100M
    </P>
  </div>
</template>

<script>
// import { createBanner } from '@/api/banner'
export default {
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 图片上传
      uploadUrl: '',
      videoFlag: false, // 是否显示进度条
      videoUploadPercent: 0, // 进度条的进度，
      isShowUploadVideo: false, // 显示上传按钮
      process: process.env.VUE_APP_BASE_API,
      videoPath: '' // 视频地址
    }
  },
  watch: {
    url: {
      handler(nv, oldName) {
        if (nv) {
          this.videoPath =
            nv.indexOf('http') > -1
              ? nv
              : process.env.VUE_APP_FILE_text_API + nv
        } else {
          this.videoPath = ''
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    beforeAvatarUpload(event) {
      // 获取上传视频的本地localUrl
      var localUrl = null
      if (window.createObjectURL !== undefined) {
        // basic
        localUrl = window.createObjectURL(event.raw)
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        localUrl = window.URL.createObjectURL(event.raw)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        localUrl = window.webkitURL.createObjectURL(event.raw)
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.videoPath = localUrl
      this.$emit('getFile', event)
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader-box {
  ::v-deep {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .video-avatar {
      width: 280px;
      height: 180px;
    }
  }
}
</style>
